<template>
  <div>
    <el-row type="flex">
      <el-col :span="4">
        <el-tree
          :style="{ height: heightTree }"
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-col>

      <el-col
        class="formWarp"
        :span="20"
        style="margin-left: 10px"
        :style="{ height: heightTree }"
      >
        <div :style="{ height: heightTable }" style="overflow-y: scroll">
          <table border="1" class="myTable">
            <thead>
              <tr>
                <td colspan="4" style="text-align: left; font-size: 18px">
                  一、大组工网网站
                </td>
              </tr>
              <tr>
                <td style="width: 150px">市级党委组织部网站名称</td>
                <td colspan="3">
                  <el-input v-model="netName" />
                </td>
              </tr>
              <tr>
                <td>市级党委组织部网站域名/IP</td>
                <td colspan="3">
                  <el-input v-model="netIp" />
                </td>
              </tr>
              <tr>
                <td>市级党委组织部网站部署情况</td>
                <td colspan="3">
                  <el-input v-model="netArrange" />
                </td>
              </tr>
              <tr>
                <td>网络技术路线</td>
                <td colspan="3">
                  <el-input v-model="netWay" />
                </td>
              </tr>
              <tr>
                <td>管理制度</td>
                <td colspan="3">
                  <el-checkbox-group v-model="isManage">
                    <el-checkbox label="否"></el-checkbox>
                    <el-checkbox label="是"></el-checkbox>
                  </el-checkbox-group>
                  <el-upload
                    style="margin-top: 5px"
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-preview="handlePreview"
                    :before-upload="before_upload"
                    :on-success="uploadSuccess"
                    :multiple="fileMultiple"
                    :limit="1"
                    :file-list="fileManageList"
                  >
                    <el-button type="primary">(请上传电子版)</el-button>
                    <div slot="tip" class="el-upload__tip">
                      允许上传pdf格式,且不超过100MB
                    </div>
                  </el-upload>
                </td>
              </tr>
              <tr>
                <td>网站管理责任科(处)室</td>
                <td colspan="3">
                  <el-input v-model="netOrg" />
                </td>
              </tr>
              <tr>
                <td>管理人员</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="classyang">
                      姓名：<el-input
                        v-model="personName"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      单位及职务：<el-input
                        v-model="jobPost"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      办公电话：<el-input
                        v-model="telPhone"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                    <p class="classyang">
                      手机号码：<el-input
                        v-model="phone"
                        style="width: 400px; text-align: right"
                      />
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td>访问中组部网站/山东组织工作网情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="classyang">
                      是否使用国产化计算机访问：
                      <el-checkbox-group v-model="isLoacalizationPc">
                        <el-checkbox label="否"></el-checkbox>
                        <el-checkbox label="是"></el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      能否正常访问：
                      <el-checkbox-group v-model="isOk">
                        <el-checkbox label="否"></el-checkbox>
                        <el-checkbox label="是"></el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      问题：<el-input v-model="reasonPc" style="width: 400px" />
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td>国产化情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="classyang">
                      是否国产化：
                      <el-checkbox-group v-model="isLoacalization">
                        <el-checkbox label="否"></el-checkbox>
                        <el-checkbox label="是"></el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      能否正常访问：
                      <el-checkbox-group v-model="optionsIsUsedOk">
                        <el-checkbox label="否"></el-checkbox>
                        <el-checkbox label="是"></el-checkbox>
                      </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      问题：<el-input
                        v-model="reasonLoac"
                        style="width: 400px"
                      />
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="4" style="text-align: left; font-size: 18px">
                  二、电子邮件系统
                </td>
              </tr>
              <tr>
                <td>市级党委组织部邮件系统域名/IP</td>
                <td colspan="3">
                  <el-input v-model="emailIp" />
                </td>
              </tr>
              <tr>
                <td>邮件系统名称/型号</td>
                <td colspan="3"><el-input v-model="emailName" /></td>
              </tr>
              <tr>
                <td>管理制度</td>
                <td colspan="3">
                  <el-checkbox-group
                    v-model="emailIsManage"
                    @change="handlEmaileManageChange"
                  >
                    <el-checkbox label="暂无"></el-checkbox>
                    <el-checkbox label="有"></el-checkbox>
                  </el-checkbox-group>
                  <el-upload
                    style="margin-top: 5px"
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-preview="handlePreviewEmail"
                    :on-success="uploadSuccessEmail"
                    :multiple="fileEmailMultiple"
                    :before-upload="before_uploadEmail"
                    :limit="1"
                    :file-list="fileEmailList"
                  >
                    <el-button type="primary">(请提供电子版)</el-button>
                    <div slot="tip" class="el-upload__tip">
                      允许上传pdf格式,且不超过100MB
                    </div>
                  </el-upload>
                </td>
              </tr>
              <tr>
                <td>邮件管理责任处室</td>
                <td><el-input v-model="emailOrg" /></td>
                <td>联系人及电话</td>
                <td><el-input v-model="personPhone" /></td>
              </tr>
              <tr>
                <td>开设邮箱数</td>
                <td><el-input v-model="emailNum" /></td>
                <td>邮箱分配范围</td>
                <td>
                  <p style="display: flex; align-items: center">
                    市级：
                    <el-checkbox-group v-model="emailCity">
                      <el-checkbox label="机构"></el-checkbox>
                      <el-checkbox label="全员"></el-checkbox>
                    </el-checkbox-group>
                  </p>
                  <p
                    style="display: flex; align-items: center; margin-top: 5px"
                  >
                    县级：
                    <el-checkbox-group v-model="emailContry">
                      <el-checkbox label="机构"></el-checkbox>
                      <el-checkbox label="全员"></el-checkbox>
                    </el-checkbox-group>
                  </p>
                </td>
              </tr>
              <tr>
                <td>访问中组部大组工网邮件系统/省委组织部组工网邮件系统情况</td>
                <td colspan="3">
                  <div style="float: left">
                    <p class="classyang">
                      是否使用国产化计算机访问：
                      <el-checkbox-group v-model="emailLocationPc">
                      <el-checkbox label="否"></el-checkbox>
                      <el-checkbox label="是"></el-checkbox>
                    </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      能否正常访问：
                      <el-checkbox-group v-model="emailIsOk">
                      <el-checkbox label="否"></el-checkbox>
                      <el-checkbox label="是"></el-checkbox>
                    </el-checkbox-group>
                    </p>
                    <p class="classyang">
                      问题：<el-input
                        v-model="emailReason"
                        style="width: 400px"
                      />
                    </p>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="4" style="text-align: left; font-size: 18px">
                  三、问题建议
                </td>
              </tr>
              <tr style="height: 80px">
                <td colspan="4" style="text-align: left">
                  <el-input type="textarea" :rows="4" v-model="remark" />
                </td>
              </tr>
            </thead>
          </table>
        </div>
        <div style="background: #fff; float: right; height: 40px">
          <el-button>取 消</el-button>
          <el-button type="primary">保 存</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      isManage: [],
      emailLocationPc:[],
      isLoacalizationPc: [],
      isOk: [],
      isLoacalization: [],
      optionsIsUsedOk: [],
      emailCity: [],
      emailIsManage: [],
      emailContry: [],
      emailIsOk:[],
      heightTree: window.innerHeight - 150 + "px",
      heightTable: window.innerHeight - 240 + "px",
      data: [
        {
          label: "山东省",
          children: [
            {
              label: "青岛市",
            },
            {
              label: "济南市",
            },
            {
              label: "烟台市",
            },
            {
              label: "潍坊市",
            },
            {
              label: "临沂市",
            },
            {
              label: "济宁市",
            },
            {
              label: "淄博市",
            },
            {
              label: "菏泽市",
            },
            {
              label: "德州市",
            },
            {
              label: "东营市",
            },
            {
              label: "威海市",
            },
            {
              label: "泰安市",
            },
            {
              label: "滨州市",
            },
            {
              label: "聊城市",
            },
            {
              label: "日照市",
            },
            {
              label: "枣庄市",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    handleCheckClassType(value) {
      console.log(value, "value");
    },
    handlEmaileManageChange() {},
  },
};
</script>
  
  <style>
.el-col {
  border-radius: 4px;
  background: #fff;
}
.formWarp {
  box-shadow: 5px 5px 10px #eee;
  padding: 5px;
}
/* >>>.el-input__inner */
.myTable {
  width: 100%;
  margin-bottom: 10px;
  border-spacing: 0;
  border: 1px solid #dcdfe6;
}

.myTable tbody {
  width: 100%;
}

.myTable td {
  word-wrap: break-word;
  font-size: 14px;
  padding: 5px 10px;
}
.classyang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 5px;
}
</style>